import { useState, useEffect } from 'react'
import { FaCat, FaHeart, FaBook, FaStar, FaCoffee, FaGamepad, FaBed,FaBolt } from 'react-icons/fa'
export default function PetActions({ onPlay, onSleep, onDrink, action, happiness, onPet }) {
  return (
    <div className="text-4xl mb-2 flex gap-2">
      <FaCat 
        className={`text-blue-500 transform transition-transform cursor-pointer
          ${action === 'sleeping' ? 'animate-bounce opacity-50' : ''}
          ${action === 'playing' ? 'animate-spin' : ''}
          ${action === 'drinking' ? 'animate-pulse' : ''}
          ${happiness < 50 ? 'opacity-50' : ''}
          hover:scale-110
        `}
        onClick={onPet}
      />
      <div className="flex gap-2 text-2xl">
        <ActionButton icon={<FaGamepad className="text-purple-500" />} onClick={onPlay} />
        <ActionButton icon={<FaBed className="text-gray-500" />} onClick={onSleep} />
        <ActionButton icon={<FaCoffee className="text-brown-500" />} onClick={onDrink} />
      </div>
    </div>
  )
}

function ActionButton({ icon, onClick }) {
  return (
    <div 
      className="cursor-pointer hover:scale-110 transition-transform"
      onClick={onClick}
    >
      {icon}
    </div>
  )
}